import { useEffect, useMemo, useRef, useState } from "react";
import {
  // listAppMenu,
  sysAppList,
  delAppMenuResources,
  getInitData
  // listTreeExcludeChild,
  // listAppMenuResources,
  // searchAppMenuResourcesList,
} from '@/api/appMenuResources/appMenuResources'

import SearchForm from "../../../components/searchForm";
import { Table, Flex } from "antd";
import { keepPreviousData, useQuery } from "@tanstack/react-query";
import { useDictionary } from "@/hooks";
import DisplayLabel from "@/components/displayLabel";
import { Link, useNavigate } from "react-router-dom";

const queryItems = [
  {
    name: 'appName',
    label: '应用名称',
    type: 'INPUT',
  }
];
//i18n
const AppMenuIndex = () => {
  useDictionary(['SYS_APP_TYPE']);
  const [queryParam, setQueryParam] = useState({});
  const [page, setPage] = useState({ pageNo: 1, pageSize: 10 });
  const columns = [
    {
      title: '应用名称',
      dataIndex: 'appName'
    },
    {
      title: '应用编码',
      dataIndex: 'appCode'
    },
    {
      title: '应用分类', // 	(0:业务类, 1:运维类 ,2: 开发类)
      dataIndex: 'appType',
      render: (text) => (
        <DisplayLabel value={text} type="SYS_APP_TYPE" />
      )
    },
    {
      title: '资源数',
      dataIndex: 'menuNum'
    },
    {
      title: '操作',
      key: 'action',
      width: '200',
      render: (_, record) => (
        <>
          <Link to={`/integration/org/appMenuResourcesDetail?id=${record.id}&appName=${record.appName}&appId=${record.appId}`}>菜单配置</Link>
        </>
      ),
    },
  ];

  const { data: tableData, isFetching, refetch } = useQuery({
    queryKey: ['page-appMenu-sysAppList', queryParam, page],
    queryFn: () => {
      return sysAppList({
        pageNum: page.pageNo,
        pageSize: page.pageSize,
        ...queryParam
      }).then((res) => {
        return res.data || {}
      })
    },
    staleTime: 0,
    placeholderData: keepPreviousData,
  })

  return (
    <Flex vertical={true} className="searchTableWrapper">
      <div className="searchTableHeader">应用菜单</div>
      <SearchForm
        onSearch={(values) => {
          if (JSON.stringify(values) !== JSON.stringify(queryParam)) {
            setQueryParam({ ...values })
          } else {
            refetch()
          }
        }}
        items={queryItems}
        searchContent="查询"
      />
      <Table
        columns={columns}
        rowKey={(record) => record.id}
        loading={isFetching}
        dataSource={tableData?.list}
        pagination={{
          current: page.pageNo,
          pageSize: page.pageSize,
          total: tableData?.total,
          onChange: (pageNo, pageSize) => {
            setPage({ pageNo, pageSize })
          }
        }}
      />
    </Flex >
  );
};


export default AppMenuIndex;
